<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>服务优势</span>
                <el-button style="float: right; padding: 3px 0" type="text">
                    <el-button type="success" @click="add"> 添加优势<i class="el-icon-plus"></i></el-button>
                </el-button>
            </div>
            <el-table
                border
                :data="form"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="内容">
                </el-table-column>
                <el-table-column
                    #default="{row:advantage}"
                    label="操作">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="edit(advantage)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="del(advantage)">删除</el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            title="修改优势"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
        >
            <!--            弹出-->
            <el-form ref="form" :model="data" label-width="80px">
                <el-form-item label="优势名称">
                    <el-input v-model="data.title"></el-input>
                    <hd-error name="title"></hd-error>
                </el-form-item>
                <el-form-item label="优势内容">
                    <el-input v-model="data.content"></el-input>
                    <hd-error name="content"></hd-error>

                </el-form-item>
                <el-form-item label="图片">
                    <hd-image v-model="data.image"></hd-image>
                    <hd-error name="password"></hd-error>

                </el-form-item>
                <el-button type="primary" size="small" @click="onSubmit(data)">保存提交</el-button>

            </el-form>
            <span slot="footer" class="dialog-footer"> </span>
        </el-dialog>
    </div>
</template>

<script>
import tabs from './tabs'
import async from "async";

export default {
    route: {name: 'admin.advantage.edit', meta: {title: '优势配置'}},
    data() {
        return {
            tabs,
            form: [],
            data: {},
            dialogVisible: false
        }
    },
    async created() {
        this.form = await this.axios.get('admin/advantage')
    },
    methods: {
        async onSubmit(advantage) {
            await this.axios.put(`admin/advantage/${advantage.id}`, advantage)
            this.dialogVisible = false;
        },
        add() {
            this.$router.push({name: 'admin.advantage.create'});
        },
        edit(advantage) {
            this.dialogVisible = true;
            this.data = advantage
        },
        handleClose() {
            this.dialogVisible = false;
            this.data = {};
        },
        async del(advantage) {
            await this.axios.delete(`admin/advantage/${advantage.id}`);
            this.form.splice(this.form.indexOf(advantage), 1);
        }
    }
}
</script>

<style scoped>

</style>
